﻿<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>扁平风格垂直手风琴UI设计|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>

    <link href="~/Content/style.css" rel="stylesheet" />
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<section class="accordion">
		       <div class="item">
		            <img src="img/Location-Pin.png" alt="">
		            <h3>Location</h3>
		       </div>
		            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
		        <div class="item">
		            <img src="img/Headphones.png" alt="">
		            <h3>Music</h3>
		       </div>
		        <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
		        <div class="item">
		            <img src="img/Lightbulb.png" alt="">
		            <h3>Notes</h3>
		       </div>
		            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
		        <div class="item">
		            <img src="img/Bookmarks.png" alt="">
		            <h3>Books</h3>
		       </div>
		            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
		        <div class="item">
		            <img src="img/Lightning-Bolt.png" alt="">
		            <h3>Tendances</h3>
		       </div>
		           <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>
		   </section>
		
	</div>
	
    <script src="~/Scripts/jquery-1.7.1.js"></script>
	<script type="text/javascript">
		(function ($) {
		    'use strict';
		    $('.item').on("click", function () {
		        $(this).next().slideToggle(100);
		        $('p').not($(this).next()).slideUp('fast');
		    });
		}(jQuery));
	</script>
</body>
</html>